<!-- 版本审核状态弹出层 -->
<template>
  <div class="popContainer">
    <!-- 状态切换按钮 -->
    <div class="statusOperation">
      <div class="opeButton">
        <span>版本审核状态</span>
        <a-button :type="myType" v-for="(status, index) in reviewStatus" :key="index" @click="getStateList(index)"> {{
        status }}</a-button>
      </div>
      <span @click="colsePop()">关闭</span>
    </div>
    <!-- 当前状态商品列表 -->
    <div class="productList">
      <!-- 商品项 -->
      <div class="productItem" v-for="(productItem, index) in allItemList" :key="index">
        <div class="proVersion">
          <div>
            <span>商品版本号：1.0.{{ productItem.version }}</span>
            <span>该版本提审时间：{{ productItem.optTime }}</span>
            <!-- ***************************************** -->
            <span :style="productItem.auditStatus===1? {color:'green'} : {color:'red'}">审核结果:{{
            transferState(productItem.auditStatus) }}</span>
            <span>备注:{{ productItem.memo }}</span>
          </div>
          <!-- ***************** -->
          <span class="onlineVersion">线上版本</span>
        </div>
        <!-- 商品详细信息 -->
        <div class="detailInfo">
          <a-descriptions layout="vertical" bordered :column="4">
            <!-- 列一 -->
            <a-descriptions-item label="Config Info">
              商品名称：{{ productItem.productName }}
              <br />
              商品品类：{{ productItem.categoryName }}
              <br />
              商品类型：{{ transferType(productItem.productType) }}
              <br />
              商家名称：{{ productItem.accountName }}
              <br />
              封面图：暂不展示
              <br />
            </a-descriptions-item>
            <!-- 列二 -->
            <a-descriptions-item label="Config Info">
              售卖开始时间：{{ productItem.saleStartTime }}
              <br />
              售卖结束时间：{{ productItem.saleEndTime }}
              <br />
              使用开始时间：{{ productItem.useStartTime }}
              <br />
              使用开始时间：{{ productItem.useStartTime }}
              <br />
              不可使用日期：动态
              <br />
            </a-descriptions-item>
            <!-- 列三 -->
            <a-descriptions-item label="Config Info">
              原价/售价：{{ productItem.originPrice }}/{{ productItem.salePrice }}
              <br />
              软件服务费率：{{ (productItem.fee / 1000) * 100 }}%
              <br />
              预约信息：无需预约（询问）
              <br />
              使用规则：（询问）
              <br />
              是否可享受店内其他优惠：（询问）
              <br />
            </a-descriptions-item>
            <!-- 列四 -->
            <!-- ************************************* -->
            <a-descriptions-item >
              <template>
                <p v-for="(dynamicItem) in getDynamicDes(JSON.parse(item.info))" :key="dynamicItem.chinese">
                {{dynamicItem.chinese}}:{{dynamicItem.content}}
                  <br />
                </p>
              </template>
            </a-descriptions-item>
          </a-descriptions>
          <!-- 抖音店铺表格 -->
          <!-- ********************************** -->
          <a-table :columns="columns" 
          :data-source="getTableData(productItem.poiList)" 
          :scroll="{ y: 240 }"
            :pagination="false" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { spuLItemUrl } from '@/service'
export default {
  name: 'versionReview',
  props: ['itemList', 'itemId'],
  data() {
    return {
      newPoiList: [],
      myType: 'default',
      currentItemId: '',
      columns: [
        {
          dataIndex: 'name'
        },
        {
          dataIndex: 'adress'
        },
        {
          dataIndex: 'gaodeId'
        },
        {
          dataIndex: 'shanghuid'
        },
        {
          dataIndex: 'tiktokPoi'
        }
      ],
      // data: [...this.newPoiList].map((poi, i) => ({
      //   key: i,
      //   name: `抖音店铺名称:${poi.name}`,
      //   adress: `抖音店铺地址:${poi.address}`,
      //   gaodeId: `高德ID:. ${poi.gdId == null ? '无' : poi.gdId}`,
      //   shanghuid: `外部商户ID: ${poi}`,
      //   tiktokPoi: `抖音POI_ID: ${poi.dyId}`
      // })),
      reviewStatus: ['全部', '审核中', '审核成功', '审核失败'],
      allItemList: []
    }
  },
  watch: {
    itemList: {
      deep: true,
      handler() {
        this.allItemList = this.itemList
        console.log(this.allItemList);
      }
    },
    itemId(value) {
      this.currentItemId = value
      console.log(this.currentItemId);

    }

  },
  methods: {
    // 关闭弹出层
    colsePop() {
      this.$emit('closePop', false)
    },
    // 审核状态
    transferState(statuaCode) {
      switch (statuaCode) {
        case 1:
          return '审核成功'
        case 2:
          return '审核失败'
        default:
          return '审核中'
      }
    },
    // 商品类型
    transferType(productType) {
      switch (productType) {
        // 1 : 团购套餐 3 : 预售券 4 : 日历房 5 : 门票 7 : 旅行跟拍 8 : 一日游 11 : 代金券
        case 1:
          return '团购套餐'
        case 3:
          return '预售券'
        case 4:
          return '日历房'
        case 5:
          return '门票'
        case 7:
          return '旅行跟拍'
        case 8:
          return '一日游'
        case 11:
          return '代金券'
        default:
          return '其他'
      }
    },
    //**************************************** */
    getDynamicDes(newInfo) {
      let dynamicTips = []
      for (let key in newInfo) {
        if (key == 'free_pack') {
          dynamicTips.push({
            chinese: '是否可以打包',
            content: newInfo[key] ? '是' : '否'
          })
        }
        if (key == 'rec_person_num_max') {
          dynamicTips.push({
            chinese: '最多使用人数',
            content: newInfo[key]
          })
        }
      }
      return dynamicTips
    },
    //********************************** */
    getTableData(poiList) {
      let newPoiList = poiList?.map((poi, i) => {
        return {
          key: i,
          name: `抖音店铺名称:${poi.name}`,
          adress: `抖音店铺地址:${poi.address}`,
          gaodeId: `高德ID:${poi.gdId == null ? '无' : poi.gdId}`,
          shanghuid: `外部商户ID: ${poi.outId}`,
          tiktokPoi: `抖音POI_ID: ${poi.dyId}`
        }
      })
      return newPoiList
    },

    // 获取状态对应的商品列表
    async getStateList(value) {
      console.log(value)
      if (value === 0) {
        let params = {
          itemId: this.currentItemId //查询当前id对应的全部的商品 不传status
        }
        let data = await spuLItemUrl(params)
        this.allItemList = data.data.data
      } else {
        let params = {
          status: value - 1,
          itemId: this.currentItemId //查询当前id对应的其他状态的商品 不status为value-1
        }
        let data = await spuLItemUrl(params)
        this.allItemList = data.data.data
      }
    }
  }
}
</script>

<style scoped lang="less">
.popContainer {
  width: 80%;
  background-color: rgb(255, 255, 255);
  padding: 20px;

  //  状态切换按钮
  .statusOperation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    span {
      font-size: 16px;
      padding: 4px;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background: #2692f8;
        color: #fff;
      }
    }

    .opeButton {
      min-width: 35%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  // 商品列表
  .productList {
    min-height: 500px;

    // 商品项
    .productItem {
      margin-bottom: 10px;

      // 商品版本信息********
      .proVersion {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 40px;
        color: #000;

        .onlineVertion {
          background: #e5ab3e;
          padding: 0 10px;
          color: #fff;
        }
      }
    }

    // 商品详细信息
    .detailInfo {
      background: #f9f8f8;
      padding: 10px;
    }

    .ant-descriptions {
      min-height: 160px;
      background: #f9f8f8;

      /deep/.ant-descriptions-view {
        border-color: transparent;
      }

      /deep/.ant-descriptions-row {
        border: none;
        border-radius: 2px;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;

        // width: 75%;
        th {
          display: none !important;
        }

        td {
          border: none;
          width: 25%;
        }
      }

      /deep/ .ant-descriptions-item-content {
        line-height: 2;
      }
    }

    .ant-table-wrapper {
      /deep/ .ant-table-thead {
        display: none;
      }

      table {
        max-height: 200px;
        overflow-y: scroll;
      }
    }
  }
}
</style>
